<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        一个模板中只能有一个变量 {{a}}-{{b}}-{{c}}<br>
        <!--  -->
        这是vue引用的模板字符串 ：{{d}}<br>
        <!--  -->
        这是vue引用的模板字符串,三运表达式 ：{{e}}<br>
        <!--  -->
        这是for循环：{{f}}<br>
    </div>

    <div id="app2">
        {{tip1}}<br>{{tip2}}<br>{{tip3}}
    </div>

</body>

<script>
    let t1 = true,
        t2 = false,
        t3 = ['why', 'text', 'quickSort', 'text-danger'],
        t4 = 5,
        t5 = [1, 2, 3, 4, 5, 6, 7, 8];
    let fn = () => 'cookie';
    let fn2 = item => item ** item;
    let test = `这是不是真的？==${t2},试一下函数：${fn()},第二个函数：${fn2(t4)}`
    let test2 = `模板字符串好像还支持js语法？${t1?'是的':"不是"}`
    let test3 = `模板字符串会自动遍历数组：${t3}`
    let data = {
        a: 1,
        b: 'haha',
        c: 'vue',
        d: test,
        e: test2,
        f: test3,
    };
    let vm = new Vue({
        el: "#app",
        data: data
    })
    vm.a = "-----通过vue对象修改了a的属性值";
    data.b = "----通过data对象修改了b的属性值";

    data2 = {
        tip1: "Object.freeze() 方法会阻止修改属性",
        tip2: "Object.freeze() 需要在Vue()实例前声明才有效，参数是引用变量",
        tip3: "这里的属性不会更新"
    }

    Object.freeze(data);
    let vm2 = new Vue({
        el: "#app2",
        data: data2
    });

    //除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。
    //它们都有前缀 $，以便与用户定义的属性区分开来
    console.log(vm.$data === data) //>>> true
    console.log(vm.data === data) //>>> false

    let n1 = vm.$el === document.getElementById('app');
    console.log(n1) //>>>true

    //$watch是一个实例方法，用于监听vue对象的值是否改变
    vm.$watch('a', (newValue, oldValue) => {
        console.log(`newValue:${newValue}=====oldValue:${oldValue}`)
    })
    vm.a = '再一次改变值'

    //每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，
    //需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。
    //同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
    new Vue({
        data: {
            a: 1
        },
        created: function() {
            // `this` 指向 vm 实例
            console.log('a is: ' + this.a)
        }
    })

    // => "a is: 1"

    /*
    也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。
    生命周期钩子的 this 上下文指向调用它的 Vue 实例。

    不要在选项属性或回调上使用箭头函数，
    比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。
    因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，
    经常导致 Uncaught TypeError: Cannot read property of undefined 
    或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
     */
</script>

</html>